import React, { useState } from 'react';
import { X, Plus, Check } from 'lucide-react';

interface TagManageModalProps {
  title: string;
  tags: string[];
  onClose: () => void;
  onSave: (tags: string[]) => void;
}

const availableTags = [
  '破冰游戏',
  '团建活动',
  '培训视频',
  '精彩回顾',
  '团队合影',
  '活动记录',
  '精彩片段'
];

export default function TagManageModal({
  title,
  tags: initialTags,
  onClose,
  onSave
}: TagManageModalProps) {
  const [selectedTags, setSelectedTags] = useState<string[]>(initialTags);
  const [newTag, setNewTag] = useState('');
  const [showTagInput, setShowTagInput] = useState(false);

  const handleAddTag = () => {
    if (newTag.trim() && !selectedTags.includes(newTag.trim())) {
      setSelectedTags([...selectedTags, newTag.trim()]);
      setNewTag('');
      setShowTagInput(false);
    }
  };

  const handleRemoveTag = (tag: string) => {
    setSelectedTags(selectedTags.filter(t => t !== tag));
  };

  const handleToggleTag = (tag: string) => {
    if (selectedTags.includes(tag)) {
      setSelectedTags(selectedTags.filter(t => t !== tag));
    } else {
      setSelectedTags([...selectedTags, tag]);
    }
  };

  const handleSubmit = () => {
    onSave(selectedTags);
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
      <div className="bg-white rounded-lg w-full max-w-md mx-4">
        <div className="flex items-center justify-between p-4 border-b">
          <h3 className="text-lg font-semibold text-gray-900">编辑标签</h3>
          <button onClick={onClose}>
            <X className="w-6 h-6 text-gray-500" />
          </button>
        </div>

        <div className="p-6">
          {/* 文件标题 */}
          <div className="mb-4">
            <h4 className="text-sm font-medium text-gray-500">文件</h4>
            <p className="text-gray-900">{title}</p>
          </div>

          {/* 已选标签 */}
          <div className="mb-6">
            <h4 className="text-sm font-medium text-gray-500 mb-2">已选标签</h4>
            <div className="flex flex-wrap gap-2">
              {selectedTags.map(tag => (
                <span
                  key={tag}
                  className="flex items-center bg-blue-50 text-blue-600 px-3 py-1 rounded-full text-sm"
                >
                  {tag}
                  <button
                    onClick={() => handleRemoveTag(tag)}
                    className="ml-2 text-blue-400 hover:text-blue-600"
                  >
                    <X className="w-4 h-4" />
                  </button>
                </span>
              ))}
              {selectedTags.length === 0 && (
                <span className="text-gray-400 text-sm">暂无标签</span>
              )}
            </div>
          </div>

          {/* 添加新标签 */}
          <div className="mb-6">
            <div className="flex items-center justify-between mb-2">
              <h4 className="text-sm font-medium text-gray-500">添加新标签</h4>
              <button
                onClick={() => setShowTagInput(!showTagInput)}
                className="text-blue-500 text-sm hover:text-blue-600"
              >
                {showTagInput ? '取消' : '+ 自定义标签'}
              </button>
            </div>
            {showTagInput && (
              <div className="flex items-center space-x-2 mb-4">
                <input
                  type="text"
                  value={newTag}
                  onChange={(e) => setNewTag(e.target.value)}
                  className="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                  placeholder="输入标签名称"
                  onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
                />
                <button
                  onClick={handleAddTag}
                  className="p-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
                >
                  <Check className="w-5 h-5" />
                </button>
              </div>
            )}
          </div>

          {/* 常用标签 */}
          <div>
            <h4 className="text-sm font-medium text-gray-500 mb-2">常用标签</h4>
            <div className="flex flex-wrap gap-2">
              {availableTags.map(tag => (
                <button
                  key={tag}
                  onClick={() => handleToggleTag(tag)}
                  className={`px-3 py-1 rounded-full text-sm transition-colors ${
                    selectedTags.includes(tag)
                      ? 'bg-blue-500 text-white'
                      : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
                  }`}
                >
                  {tag}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="flex justify-end space-x-3 p-4 bg-gray-50 rounded-b-lg">
          <button
            onClick={onClose}
            className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg"
          >
            取消
          </button>
          <button
            onClick={handleSubmit}
            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
          >
            确定
          </button>
        </div>
      </div>
    </div>
  );
}